<template>
    <div class="iotvideo">
        <video class="vjs-small video-js vjs-layout-small" ref="vo" :height="height">
        </video>
    </div>
</template>

<script setup lang="ts">
import { Socket } from 'socket.io-client';
import { DeviceServiceDetailResult, IwebrtcConfigs, IwebrtcConfigsurl } from '../interface';
import { ShallowRef, onDeactivated, onMounted, ref, shallowRef, watch } from 'vue';
import type Player from 'video.js/dist/types/player'
import { useElementSize, useIntervalFn } from '@vueuse/core'
const videojs = (window as any).videojs
const p = defineProps<{ device: DeviceServiceDetailResult, socket: Socket, home_id?: string[], width: number, height: number, actionsallocateemit: (home_id: string, id: string, isRefresh?: boolean) => void }>()

interface Ocon { webrtcConfigs: { result: IwebrtcConfigs }, config: IwebrtcConfigsurl }
const dataurl = ref<string>()
const webrtcconf = ref<Ocon>()
const vo = ref<HTMLVideoElement>()
const player = shallowRef<Player>()
const { pause, resume, isActive } = useIntervalFn(() => {
    if (p.home_id) {
        p.actionsallocateemit(p.home_id, p.device.id)
    }
    error.value = false
}, 60000)
const error = ref(false)
onMounted(() => {
    if (vo.value) {
        player.value = videojs(vo.value, {
            autoplay: true,
            controls: true,
            language: 'zh-cn',
            responsive: true,
            muted: true,
            fluid: true
        }, () => { });

    }

    p.socket.on('actions.allocate', (e: any) => {

        if (e.device_id === p.device.id) {

            dataurl.value = e.result.url
            player.value?.src({ type: 'application/x-mpegURL', src: dataurl.value, preload: 'auto' });
        }
    })
    // p.socket.on('webrtc.webrtc', (e: Ocon) => {
    //     webrtcconf.value = e

    //     console.log(webrtcconf.value.webrtcConfigs.result)
    //     player.value?.src({
    //         iceServers: [
    //             {
    //                 "credential": "dQI3Fk1NgEBk49oH2OvNUp4H3so=",
    //                 "ttl": 3600,
    //                 "urls": "turn:47.103.32.85:3478",
    //                 "username": "1704995940:6cf054048fe549eb3da4tg"
    //             }
    //         ]
    //     });
    //     // player.value?.src({ src: 'ssl://m1.tuyacn.com:8883', iceServers: webrtcconf.value.webrtcConfigs.result.p2p_config.ices });

    // })
    if (p.home_id) {
        p.actionsallocateemit(p.home_id, p.device.id)
    }

    // p.socket.emit('webrtc.webrtc', {
    //     uid: p.home_id,
    //     deviceId: p.device.id
    // })

    player.value?.on('error', e => {
        console.log(e)
        error.value = true
        // if (p.home_id) {
        //     p.actionsallocateemit(p.home_id, p.device.id, true)
        // }
    })
})

watch(() => error.value, e => {
    if (e) {
        if (p.home_id) {
            p.actionsallocateemit(p.home_id, p.device.id, true)
        }
    }
})

onDeactivated(() => {
    p.socket.removeListener('actions.allocate')
    p.socket.removeListener('webrtc.webrtc')
    player.value?.dispose()
    resume()
})




</script>

<style scoped>
.iotvideo {
    height: 100%;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>